import config from '../../../graph/config'
import FlowGraph from '../../../graph/index'

export function changeStrokeWidthAndArrow(Edge, width, type) {
  const {
    shape,
    attrs: {
      line: { targetMarker }
    }
  } = Edge
  if (shape === 'edge') {
    Edge.attr('line/strokeWidth', width)
    if (!targetMarker) {
      return
    }
    if (['circle', 'circlePlus'].includes(targetMarker.name)) {
      targetMarker.r = width + 4
    } else if (targetMarker.name === 'ellipse') {
      targetMarker.rx = width + 7
      targetMarker.ry = width + 4
    } else if (targetMarker.name !== 'path') {
      targetMarker.size = width + 7
    }
    Edge.attr('line/targetMarker', targetMarker)
  }
  if (shape === 'double-edge') {
    Edge.attr('line/strokeWidth', width - 2)
    Edge.attr('outline/strokeWidth', width)
    if (type === 'double-edge') {
      const y = width / 2
      Edge.attr('line/targetMarker/d', `M 10 -${y} 10 -10 -2 0 10 10 10 ${y}`)
    } else {
      const y = width / 2 - 0.5
      Edge.attr('line/targetMarker/d', `M-3 -${y} l10 0 M-3 ${y} l10 0`)
    }
  }
}

const MARKER_TYPE = {
  TARGET_MARKER: 'targetMarker',
  SOURCE_MARKER: 'sourceMarker'
}
export function changeEdgeArrow(type, edgeCell, isTarget = true) {
  const { attrs, shape } = edgeCell
  const markerName = isTarget ? MARKER_TYPE.TARGET_MARKER : MARKER_TYPE.SOURCE_MARKER
  // 不带箭头
  if (type === 'none') {
    if (markerName === MARKER_TYPE.TARGET_MARKER) {
      edgeCell.attr(`line/${markerName}`, null)
    } else {
      edgeCell.attr(`line/${markerName}`, null)
    }
    return
  }
  if (shape === 'double-edge') {
    // 带箭头
    const {
      line: { strokeWidth },
      outline: { stroke }
    } = attrs

    const y = strokeWidth / 2
    const d = `M 10 -${y} 10 -10 -2 0 10 10 10 ${y}`
    edgeCell.attr(`line/${markerName}`, { stroke: stroke, d, tagName: 'path' })
  } else {
    let marker = edgeCell.attr(`line/${markerName}`) || {}
    const strokeWidth = edgeCell.attr('line/strokeWidth')
    if (typeof marker === 'string') {
      marker = { name: marker, size: strokeWidth + 7 }
    } else {
      marker = { ...marker, name: type, size: strokeWidth + 7 }
    }
    edgeCell.attr(`line/${markerName}`, marker)
  }
}

const getDoubleEdgeAttrs = (stroke) => ({
  line: {
    stroke: '#ffffff',
    targetMarker: {
      stroke: stroke
    }
  },
  outline: {
    strokeDasharray: config.strokeDasharray,
    stroke: stroke
  }
})

const getEdgeAttrs = (stroke) => ({
  line: {
    strokeWidth: config.strokeWidth,
    stroke,
    strokeDasharray: config.strokeDasharray,
    targetMarker: {
      name: config.targetMarkerName,
      size: config.targetMarkerSize
    }
  }
})
export function changeEdgeType(type, currentEdge) {
  const [selectedShapeType, strokeDasharray] = type.split(',')
  const { id, target, source, index, router, shape } = currentEdge

  if (selectedShapeType !== shape) {
    FlowGraph.graph.removeEdge(id)
    let attrs
    if (selectedShapeType === 'double-edge') {
      const stroke = currentEdge.attr('line/stroke')
      attrs = getDoubleEdgeAttrs(stroke)
    } else {
      const stroke = currentEdge.attr('outline/stroke')
      attrs = getEdgeAttrs(stroke)
    }
    const newEdge = FlowGraph.graph.addEdge({
      shape: selectedShapeType,
      target,
      source,
      index,
      router,
      attrs
    })
    FlowGraph.graph.select(newEdge)
  } else {
    const strokeDasharrayNum = parseInt(strokeDasharray)
    if (shape === 'edge') {
      currentEdge.attr('line/strokeDasharray', strokeDasharrayNum)
    } else {
      currentEdge.attr('outline/strokeDasharray', strokeDasharrayNum)
    }
  }
}
